<template>
	<view class="page">
		<view class="wrapper">
			<view class="my-tab">
				<wuc-tab textFlex :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange" selectClass="text-active"></wuc-tab>
				<view class="blank" style="height: 20rpx;"></view>
				<swiper :current="TabCur" duration="300" @change="swiperChange" :style="{ height: listHeight + 'px' }">
					<swiper-item v-for="(item,index) in tabList" :key="index">
						
						<view class="list">
							<view class="card" v-for="(i,k) in 3" :key="k">
								<view class="left">
									<view class="title">
										超级矿机
									</view>
									<view class="text">
										运行时间: 2020-02-03 18:44:33
									</view>
								</view>
								<view class="right">
									<text class="lg text-gray icon cuIcon-lightfill"></text>
								</view>
							</view>
						</view>
						
					</swiper-item>
				</swiper>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				tabList: [{
					name: '运行中'
				}, {
					name: '已过期'
				}],
				listHeight: 600
			}
		},
		watch: {
			TabCur(index) {
				
			}
		},
		methods: {
			tabChange(index) {
				this.TabCur = index;
			},
			swiperChange(e) {
				let { current } = e.target;
				this.TabCur = current;
			}
		}
	}
</script>

<style scoped>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
	
	.list .card {
		color: #fff;
		background: #1B1B3B;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 50rpx;
		line-height: 2;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #A1A1AA;
	}
	.list .card .title {
		font-size: 40rpx;
		color: #fff;
	}
	.list .card .icon {
		font-size: 80rpx;
		color: #00D28B;
	}
</style>
